<template>
  <div class="export-center-page">
    <div class="search-wrapper">
      <super-search :search-form="searchForm" :search-item-config="searchItemList" @search="searchHandle"></super-search>
    </div>

    <div class="content-wrapper">
      <super-table
        :height="tableHeight"
        ref="tableRef"
        v-model:page="searchForm.pageNum"
        v-model:limit="searchForm.pageSize"
        :loading="loading"
        :data="tableData"
        :total="searchForm.total"
        :column="tableColumn"
        @change-page="getData"
      >
        <template #tool>
          <a-button type="primary" @click="barchDeleteHandle">批量删除</a-button>
        </template>

        <template #status="{ row }">
          <span v-if="row.status === 1">等待中</span>
          <span v-if="row.status === 2">导出中</span>
          <span v-if="row.status === 3">导出成功</span>
          <span v-if="row.status === 4">导出失败</span>
        </template>

        <template #action="{ row }">
          <a-button @click="downFileHandle(row)" type="link" v-if="row.status === 3" v-debounce> 下载</a-button>
          <a-button @click="downFileHandle(row)" type="link" v-if="row.status === 4" v-debounce>重试</a-button>
          <a-button type="link" @click="deleteHandle(row)" danger v-if="row.status === 3">删除</a-button>
          <a-button type="link" @click="cancelHandle(row)" v-if="row.status === 2" v-debounce>取消</a-button>
        </template>
      </super-table>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "ExportQueue"
};
</script>
<script setup lang="ts">
import InitHook from "./composables/initHook";
import TableHeightHook from "@/hook/tableHeightHook";
import { searchItemList, tableColumn } from "./data";
import OperationHook from "./composables/operationHook";
import CommonHook from "@/hook/commonHook";
import { onActivated, onMounted } from "vue";

const { tableHeight, loading } = TableHeightHook(50);
const { tableData, searchForm, tableRef } = InitHook();
const { downloadFileByUrl } = CommonHook();

const { searchHandle, getData, downFileHandle, deleteHandle, cancelHandle, barchDeleteHandle } = OperationHook({
  searchForm,
  loading,
  tableData,
  tableRef,
  downloadFileByUrl
});
onMounted(() => {
  getData();
});
onActivated(() => {
  getData();
});
</script>
<style lang="stylus" scoped></style>
